<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入favicon图标 -->
    <link rel="stylesheet" href="/favicon.ico">
    <!-- 引入index.css -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入字体图标css文件  -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<!-- 头部模块 -->
<header class="suspension">
    <div class="m-navbar">
        <a href="#" class="logo"><i class="iconfont Navbar_logo"></i></a>
        <div class="right">
            <a href="#" class="search">
                <i class="iconfont ic_search_tab"></i>
            </a>
            <a href="#" class="face"><img src="./images/login.png" alt=""></a>
            <div class="app-btn"><img src="./images/download.png" alt=""></div>
        </div>
    </div>
    <!-- 频道 -->
    <div class="channel-menu">
        <div class="tabs">
            <div class="tab-list">
                <a href="#">首页</a>
                <a href="#">番剧</a>
                <a href="#">科创</a>
                <a href="#">国创</a>
                <a href="#">动漫</a>
                <a href="#">音乐</a>
                <a href="#">影视</a>
                <a href="#">影视</a>
                <a href="#">影视</a>
                <a href="#">影视</a>
                <!-- 小红线 -->
                <div class="line"></div>
            </div>
        </div>
        <div class="after">
            <i class="iconfont general_pulldown_s"></i>
        </div>
    </div>
</header>
<!-- 主体部分 -->
<div class="m-home">
    <div class="video-list">
        <a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>

        </a><a class="video-item">
            <div class="card">
                <img src="./images/八度空间.avif" alt="">
                <!-- 播放量 -->
                <div class="count">
                    <span><i class="iconfont icon_shipin_bofangshu"></i>播放量</span>
                    <span><i class="iconfont icon_shipin_danmushu"></i>评论数</span>
                </div>
            </div>
            <p class="title ellipsis-2">8项提名0中,周杰伦被低估的专辑丨八度空间20周年企划&牛顿】</p>
        </a>
    </div>
</div>
<!-- 底部部分 -->
<div class="m-app">
    <div class="app-content">
        <i class="iconfont Navbar_logo"></i>打开App，看你感兴趣的视频
    </div>
</div>
<script>
    // 获取元素
    const list = document.querySelector('.tab-list');
    const line = document.querySelector('.line');
    list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            // console.log(e.target.offsetLeft);
            line.style.transform = `translateX(${e.target.offsetLeft / 3.75}vmin)`;

        }

    })
</script>

<body>

</body>

</html>